
<template>
  <table-page>
    <!--  店铺管理-->
    <div slot="Header" class="header">
      <!--    输入框-->
      <div class="inputGroup">
        <!-- 店铺名称 -->
        <div class="input">
          <span>店铺名称：</span>
          <el-input placeholder="店铺名称搜索" size="small" v-model="inputData.shopName" clearable></el-input>
        </div>
         <!-- 店铺名称 -->
        <div class="input">
          <span>店铺销售额查询开始：</span>
           <el-input-number v-model="options2.num" controls-position="right"  :min="0"></el-input-number>
         </div>
        <!-- 店铺名称 -->
        <div class="input">
          <span>店铺销售额查询结束：</span>
           <el-input-number v-model="options2.num2" controls-position="right"  :min="1"></el-input-number>
        </div>
        <!--按钮-->
        <div class="bthGroup">
          <!-- 搜索 -->
          <el-button type="primary" size="small" icon="el-icon-search" @click="orderSerch">搜索</el-button>
          <!-- 重置 -->
          <el-button size="small" icon="el-icon-search" @click="orderReset(inputData)" plain>重置</el-button>
        </div>
      </div>
      <!-- 添加店铺功能 -->
      <el-dialog title="新增店铺" :visible.sync="dialogVisible" width="25%" :before-close="handleClose" style="textAlign:center">
        <div class="serchinput">
          <ul>
            <li>
              <span>店铺名称：</span>
              <el-input v-model="insertData.shopName" placeholder="请输入店铺名称" size="small"></el-input>
            </li>
            <li>
              <span>店铺销售额 ：</span>
              <el-input v-model="insertData.sales" placeholder="请输入店铺销量" size="small"></el-input>
            </li>
          </ul>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click='insertSuccess'>提 交</el-button>
          <el-button @click="handleClose">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 修改店铺功能 -->
      <el-dialog title="修改店铺信息" :visible.sync="dialogVisibles" width="25%" :before-close="handleClose" style="textAlign:center">
        <div class="serchinput">
          <ul>
            <li>
              <span>店铺名称：</span>
              <el-input v-model="editData.shopName" placeholder="请输入店铺名称" size="small"></el-input>
            </li>
            <li>
              <span>店铺销售额：</span>
              <el-input v-model="editData.sales" placeholder="请输入店铺名称" size="small"></el-input>
            </li>
          </ul>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click='editSuccess'>提 交</el-button>
          <el-button @click="handleClose">取 消</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 表格组件数据渲染 -->
    <wtable slot="Body" :data="data" :column="column" @getRow="getRow($event)" :total="page.total" :loading="loading" @newinsertUser="newinsertUser($event)">
    </wtable>
    <!--    分页功能-->
    <div slot="Footer" style="color: white">
      <el-pagination @current-change="changePage" @size-change="changeSize" :current-page="inputData.pageNum" :page-size="inputData.pageSize" :page-sizes="[15, 20, 50, 100]" layout="prev, pager, next,jumper,sizes " :total="page.total" background />
    </div>
  </table-page>
</template>

<script>
import { getShopList, insertShopList, updateShopList, deleteShopList } from '@/api/store'
import tablePage from "@/layout/components/tablePage"; //全局组件布局引用
import wtable from "@/components/shop/index"; //全局组件表格引入
export default {
  components: {
    tablePage,
    wtable
  },
  name: "manager_manage",
  data() {
    return {
      // 对话框隐藏于显示变量
      dialogVisible: false,
      dialogVisibles: false,
      title: '',
      //选择第几页
      page: {
        total: 0,
      },
      options: [
        {
          label: '所有人',
          value: 'all'
        },
        {
          label: '老师',
          value: 'teacher'
        },
        {
          label: '学生',
          value: 'student'
        },
      ],
      options2: {
        num: 0,
        num2:  1
      },
      //【提交】输入框数据
      inputData: {
        //参数名	                必选	    类型	       说明
        shopName: '',	                //否	  String	      店铺删除
        salesRange: '',	                //否	  String	      店铺销售额
        pageNum: 1,	                  //否	  Integer	       页码
        pageSize: 15,              //否	  Integer	       条数
      },
      insertData: {
        shopName: '',
        sales: ''
      },
      // 新增或修改变量数据
      editData: {
        //参数名	必选	类型	说明
        id: '',	//否	String	角色id(传参代表修改，不传代表添加)
        shopName: '',	//是	String	账号
        sales:'',
      },
      //变换是否加载Table
      loading: false,
      // 导出是否加载
      btnLoading: false,
      // 表格数据
      data: [],
      // 表头行数据
      column: [
        {
          prop: "id",
          label: "店铺编号",
          width: "50"
        },
        {
          prop: "shop_sales",
          label: "店铺销售额",
          width: "30"
        },
        {
          prop: "shop_name",
          label: "店铺名称",
          width: "80"
        },
        {
          label: "操作",
          fun: [
            {
              name: "修改",
              type: "edit"
            },
            {
              name: "删除",
              type: "delete"
            }
          ],
          width: "60"
        }
      ],
      treeRoute: null, // 路由显示
      serviceRoutes: null,  // 默认路由列表
      defaultChecked: null, // 默认选中的节点id
      roleRule: null, // 角色权限列表
      resRoleList: null,// 显示权限id
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 属性配置信息
      attributes: {
        id: "id",
        parentId: "parent_id",
      },
    };
  },
  created() {
    // 开始获取表格数据
    this.getOrderLists();
  },
  methods: {
    // 搜索方法
    orderSerch() {
      this.getOrderLists();
    },
    // 行内修改方法
    getRow(obj) {

      // 对话框显示
      //当前是否为修改结果
      if (obj.type == "edit") {
        this.dialogVisibles = true;
        this.editData.id = obj.row.id;
        this.editData.shopName = obj.row.shop_name;
        this.editData.sales = obj.row.shop_sales;
      }
      // 删除接口
      if (obj.type == 'delete') {
        this.$confirm(( '即将删除"') + obj.row.shop_name + '"店铺,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async (valid) => {
          const res = await deleteShopList(
            {
              id: obj.row.id
            }
          )
          if (res.code !== 100) return false
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getOrderLists()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除!'
          })
        })
      }
    },
    // 新增用户角色权限
    newinsertUser() {
    this.dialogVisible = true;
    this.insertData.shopName = '';
    this.insertData.sales = '';
    },
    //表格数据获取方法
    async getOrderLists() {
    if(this.options2.num!==0 && this.options2.num2!==1){
        this.inputData.salesRange =this.options2.num  + ',' + this.options2.num2;
    }
      // 获取接口数据 进行赋值
      const res = await getShopList(this.inputData);
      // 给当前表格数据进行渲染
      this.data = res.data.data
      this.page.total = res.data.paging.total
    },
    // 添加店铺信息
    insertSuccess() {
      insertShopList(this.insertData).then(res => {
        if (res.code !== 100) return this.$message.error(res.msg)
        this.$message.success('添加成功')
        this.getOrderLists()
        this.dialogVisible = false
      })
    },
    // 重置表单
    orderReset(data) {
      for (let items in data) {
        data[items] = null;
      }
      this.options2.num=0;
      this.options2.num2=1;
      this.inputData.page = 1
      this.inputData.pageSize = 15
      this.getOrderLists(); //获取数据
    },
    /**
     *改变页码
     * @param page
     */
    changePage(page) {
      this.inputData.pageNum = page
      this.getOrderLists();
    },
    /**
     * 改变size
     * @param size
     */
    changeSize(size) {
      this.inputData.pageSize = size
      this.getOrderLists();
    },
    // 是否关闭当前修改搜素框
    // 修改取消搜索
    handleClose() {
      this.dialogVisible = false;
      this.dialogVisibles = false;
      this.$message.info("取消操作");
    },
    // 修改提交
    async editSuccess() {
      const res = await updateShopList(this.editData)
      if (res.code !== 100) return this.$message.error('数据修改失败')
      this.$message.success("修改" + res.msg + '!')
      this.dialogVisibles = false;
      this.getOrderLists();
    }
  }
};
</script>

<style scoped lang='scss'>
// 头部样式
.header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-x: auto;

  // 输入框组布局
  .inputGroup {
    width: 100%;
    height: 100%;
    flex: 2;
    background-color: #fff;
    display: flex;
    padding-left: 30px;
    // 输入框里布局
    .input {
      flex: 1;
      display: flex;
      align-items: center;
      span {
        font-size: 15px;
        white-space: nowrap;
      }
      .el-input {
        width: 150px;
      }
    }

    // 按钮组布局
    .bthGroup {
      flex: 1;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 130px;
      margin-left: 10px;
    }
  }
  // 修改表单样式
  .el-dialog {
    border-radius: 20px;
    // 上册搜索按钮组
    .serchinput {
      width: 100%;
      ul {
        width: 90%;
        li {
          list-style: none;
          margin-left: 0px;
          display: flex;
          align-items: center;
          margin-top: 5px;
          span {
            width: 80px;
            text-align: right;
            white-space: nowrap;
            margin-right: 10px;
            font-size: 16px;
          }
          input {
            width: 150px;
          }
        }
      }
    }
    // 表单日期搜索格式
    #lastDate {
      padding-right: 16px;
      .el-date-editor {
        width: 470px;
      }
    }
    // 设置表单页脚居中
    .dialog-footer {
      display: flex;
      justify-content: center;
    }
  }
}
</style>

